<template>
  <div class="second_level_page start_picking_page">
    <section class="warehouse_demo">
      <div class="warehouse_top">
        仓库代码：{{ this.$route.query.warehouseCode }}
      </div>
      <section class="inorder_demo">
        <div class="inorder_top">
          采购单号：{{ this.$route.query.orderCode }}
        </div>
        <div v-for="good in inorderGoodsList" class="goods_demo">
          <div>
            <div class="goods_demo_left left">
              <img :src="good.goodsImg" />
            </div>
            <div class="goods_demo_right">
              <div class="goods_name">{{ good.goodsName }}</div>
              <div class="goods_sku_sale">
                <span class="goods_sku">{{ good.specificationName }}</span>
              </div>
              <div class="goods_sku_sale">
                <span class="goods_sku">数量：{{ good.buyNum }}</span>
              </div>
            </div>
            <div
              @click="good.flag = !good.flag"
              :class="good.flag ? 'btn active' : 'btn'"
            ></div>
          </div>
        </div>
      </section>
    </section>
    <div class="heightBottom"></div>
    <section class="picking_footer">
      <div class="picking_total left">
        <svg>
          <use :xlink:href="'#selectedActive'"></use>
        </svg>
        <span>全选</span>
        <!-- <span class="total_num">总共27件</span> -->
        <!-- <span class="picking_num">已验<span>16</span>件</span> -->
      </div>
      <div class="picking_btn right" @click="updateOrderStepToFour(orderCode)">
        提交
      </div>
    </section>
  </div>
</template>

<script>
import { selectInorderGoodsList, updateOrderStepToFour } from "src/service/api";
export default {
  data() {
    return {
      orderCode: "",
      inorderGoodsList: [],
      flag: true,
    };
  },
  components: {},
  created() {
    this.orderCode = this.$route.query.orderCode;
    selectInorderGoodsList({ orderCode: this.$route.query.orderCode }).then(
      (response) => {
        this.inorderGoodsList = response.data;
        this.inorderGoodsList.forEach((good) => {
          good.flag = this.flag;
        });
      }
    );
  },
  methods: {
    updateOrderStepToFour(orderCode) {
      updateOrderStepToFour(orderCode).then((response) => {
        this.$router.push({ path: "/schedule", query: { flush: 1 } });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";

.warehouse_demo {
  background: #fff;
  margin-top: 0.2rem;
  .warehouse_top {
    @include wh(100%, 0.88rem);
    padding: 0 0.2rem;
    @include sc(0.3rem, #333);
    line-height: 0.88rem;
    border-top: 0.01rem solid #e3e3e3;
  }
  .inorder_demo {
    background: #fff;
    .inorder_top {
      @include wh(100%, 0.8rem);
      padding: 0 0.2rem;
      @include sc(0.26rem, #999);
      line-height: 0.8rem;
      border-top: 0.01rem solid #e3e3e3;
    }
    .goods_demo {
      @include wh(100%, 2.1rem);
      background: #fff;
      clear: both;
      border-top: 0.01rem solid #e3e3e3;
      position: relative;
      .goods_demo_left {
        margin: 0.2rem;
        @include wh(1.7rem, 1.7rem);
        img {
          @include wh(100%, 100%);
        }
      }
      .goods_demo_right {
        padding-top: 0.3rem;
        padding-left: 2.1rem;
        margin-right: 0.2rem;
        .goods_name {
          padding-right: 1.5rem;
          @include sc(0.3rem, #333);
          line-height: 0.3rem;
          max-height: 0.6rem;
          overflow: hidden;
        }
        .goods_sku_sale {
          margin-top: 0.2rem;
          height: 0.24rem;
          line-height: 0.24rem;
          @include sc(0.24rem, #999);
          .goods_sku {
            margin-right: 0.28rem;
            @include sc(0.24rem, #999);
          }
          .goods_sale {
            @include sc(0.24rem, #999);
          }
        }
      }
      .btn {
        @include wh(1.02rem, 0.62rem);
        position: absolute;
        top: 50%;
        right: 0.2rem;
        margin-top: -0.31rem;
        background: url(../../../images/defaultBtn.png) no-repeat;
        background-size: 100% 100%;
      }
      .btn.active {
        background: url(../../../images/selectedBtn.png) no-repeat;
        background-size: 100% 100%;
      }
    }
    .goods_demo:last-child {
      border-bottom: 0;
    }
  }
}
.picking_footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.96rem;
  background: #fff;
  border-top: 0.01rem solid #e3e3e3;
  .picking_total {
    @include wh(5.2rem, 100%);
    padding-left: 0.2rem;
    @include sc(0.32rem, #333);
    line-height: 0.96rem;
    svg {
      float: left;
      margin: 0.28rem 0.1rem 0.28rem 0;
      @include wh(0.4rem, 0.4rem);
    }
    span {
      margin-right: 0.4rem;
    }
    .total_num {
      margin-right: 0.28rem;
      @include sc(0.28rem, #666);
    }
    .picking_num {
      @include sc(0.28rem, #666);
      span {
        margin: 0;
        color: $blue;
      }
    }
  }
  .picking_btn {
    @include sc(0.3rem, #fff);
    @include wh(2.3rem, 100%);
    background: $blue;
    text-align: center;
    line-height: 0.96rem;
  }
}
</style>
